import { defineComponent, reactive } from 'vue';
import DiffCompare from '../main';
import styles from './App.module.scss';
import {
  ModeEnum,
  OutputFormatEnum,
  LanguageEnum
} from '../main/data/type';
export default defineComponent({
  setup() {
    const config = reactive<{
      mode: ModeEnum;
      dialog: boolean;
      language: LanguageEnum;
      outputFormat: OutputFormatEnum;
      trim: boolean;
      maxHeight: string;
      filename: string;
      context: number
    }>({
      mode: ModeEnum.WORD,
      dialog: true,
      language: LanguageEnum.PLAINTEXT,
      outputFormat: OutputFormatEnum.SIDE_BY_SIDE,
      trim: false,
      maxHeight: '400px',
      filename: '',
      context: 10
    })
    return () => (
      <div class={styles.root}>
        <DiffCompare
          mode={config.mode}
          dialog={config.dialog}
          language={config.language}
          outputFormat={config.outputFormat}
          trim={config.trim}
          maxHeight={config.maxHeight}
          filename={config.filename}
          context={config.context}
        />
      </div>
    )
  }
})
